<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>消息</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1573864_eb6ymv1fry.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/index.css">
    <link rel="stylesheet" href="../css/message.css">
</head>

<body>
    <script src="../js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/vant.min.js"></script>

    <div id="container">
        <!--顶部-->
        <div class="top">
            <van-nav-bar title="消息中心" left-text="返回" left-arrow v-on:click-left='onClickLeft'>
                <van-icon name="plus" slot="right" />
            </van-nav-bar>
            <van-button size="small" round >没有未读的消息</van-button>
            <van-button size="small" round v-on:click='clear'>清除未读的消息</van-button>
        </div>
        <!--顶部结束-->
        <!--中间部分-->
        <div class="center">
            <ul>
                <li>
                    <img src="http://android-artworks.25pp.com/fs08/2016/08/12/7/110_f9b4d813f65669f0de776c3b11dc28a3_con.png"
                        alt="">
                    <p>交易物流</p>
                </li>

                <li>
                    <img src="https://p5.ssl.qhimgs1.com/sdr/400__/t0193e1b2f6d302568f.jpg" alt="">
                    <p>活动优惠</p>
                </li>
            </ul>
        </div>
        <!--消息列表-->
        <div class="list">
            <ul>
                <li class="list-item " v-for="news in newsList" data-type="0">
                    <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="skip">
                        <img class="list-img" :src="news.newsImage" alt="">
                        <div class="list-content">
                            <p class="title">{{news.name}}</p>
                            <p class="details">{{news.details}}</p>
                            <p class="time">{{news.time}}</p>
                        </div>
                    </div>
                    <div class="delete" @click="deleteItem" :data-index="index">删除</div>
                </li>
            </ul>
        </div>
         <!--消息列表结束-->
          <!--底部导航-->
        <div class="tabbar">
            <ul>
                <li>
                    <a href="../html/home.html">
                        <span class="iconfont icon-home"></span>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="../html/message.html">
                        <span class="iconfont icon-message"></span>
                        <p>消息</p>
                    </a>
                </li>
                <li>
                    <a href="../html/shoppingcart.html">
                        <span class="iconfont icon-shopping"></span>
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="../html/my.html">
                        <span class="iconfont icon-my"></span>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--底部导航结束-->
    </div>
        <script>
            var vm = new Vue({
                el: "#container",
                data: {
                    index:"",
                    newsList: [
                        {
                            name: "服务通知",
                            newsImage: "http://ku.90sjimg.com/element_origin_min_pic/17/08/03/4db25a1998a934f661874d30218b220c.jpg",
                            details: "签到提醒",
                            time: "10:30"
                        },
                        {
                            name: "韩都衣舍",
                            newsImage: "http://a3.att.hudong.com/56/07/20300542752351140989079687088.jpg",
                            details: "上新了，快来看看",
                            time: "昨天"
                        },
                        {
                            name: "特步旗舰店",
                            newsImage: "https://p5.ssl.qhimgs1.com/sdr/400__/t012d352c5fc608420f.png",
                            details: "【验收提醒】",
                            time: "星期六"
                        },
                        {
                            name: "puma",
                            newsImage: "http://imgboys1.yohobuy.com/cmsimg01/2018/03/09/10/25/012bd1c6d47796283a586952dbb97bce9d.png?imageView2/2/w/734",
                            details: "上新了，快来看看",
                            time: "星期一"
                        },
                        {
                            name: "唐狮",
                            newsImage: "https://p1.ssl.qhimg.com/t01a565d1736c3bcb91.jpg",
                            details: "上新了，快来看看",
                            time: "2019-10-10"
                        },
                        {
                            name: "vans旗舰店",
                            newsImage: "http://pic37.nipic.com/20140122/9777845_170736056324_2.jpg",
                            details: "上新了，快来看看",
                            time: "2019-07-27"
                        }
                    ],
                    startX: 0,
                    endX: 0,

                },
                methods: {
                    onClickLeft: function () {
                        window.location.href = '../html/home.html'
                    },
                    clear:function(){
                        alert("确定要清除未读消息？")
                    },
                    //跳转
                    skip: function () {
                        if (this.checkSlide()) {
                            this.restSlide();
                        } else {
                            alert('You click the slide!')
                        }
                    },
                    //滑动开始
                    touchStart: function (e) {
                        // 记录初始位置
                        this.startX = e.touches[0].clientX;
                    },
                    //滑动结束
                    touchEnd: function (e) {
                        // 当前滑动的父级元素
                        let parentElement = e.currentTarget.parentElement;
                        // 记录结束位置
                        this.endX = e.changedTouches[0].clientX;
                        // 左滑
                        if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
                            this.restSlide();
                            parentElement.dataset.type = 1;
                        }
                        // 右滑
                        if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
                            this.restSlide();
                            parentElement.dataset.type = 0;
                        }
                        this.startX = 0;
                        this.endX = 0;
                    },
                    //判断当前是否有滑块处于滑动状态
                    checkSlide: function () {
                        let listItems = document.querySelectorAll('.list-item');
                        for (let i = 0; i < listItems.length; i++) {
                            if (listItems[i].dataset.type == 1) {
                                return true;
                            }
                        }
                        return false;
                    },
                    //复位滑动状态
                    restSlide: function () {
                        let listItems = document.querySelectorAll('.list-item');
                        // 复位
                        for (let i = 0; i < listItems.length; i++) {
                            listItems[i].dataset.type = 0;
                        }
                    },
                    //删除
                    deleteItem: function (e) {
                        // 当前索引
                        let index = e.currentTarget.dataset.index;
                        // 复位
                        this.restSlide();
                        // 删除
                        this.newsList.splice(index, 1);
                    }
                },
            })
        </script>
</body>

</html>